#{extends 'layout.html' /}
#{set title:messages.get('promo.list.title') /}

#{script 'jquery-ui-1.8.21.custom.min.js'/}
#{script 'jquery.ui.datepicker.js'/}
#{script 'jquery.ui.datepicker-es.js'/}
#{script 'datepicker.js'/}
#{script 'graficos/jquery.flot.js'/}
#{script 'list_promo.js'/}

<div id="crudList" class="${type.name}">
	
	<h2 id="crudListTitle">&{'promo.list.title'}</h2>
	
	#{if totalCount <= 0}
		<div class="crudFlash flashError">
			&{'promo.sinPromos'}
		</div>
	#{/if}
	
	#{if totalCount > 0}
		<div id="crudListTable">
			#{crud.table fields:['nombre', 'fechaEnviado', 'promo.enviar', 'estadisticas']
						, sort: ['nombre', 'fechaEnviado']}
				
				#{crud.custom 'promo.nombre'}
					<a href="@{Promos.show(object.id)}">
						${object.nombre}
					</a>
				#{/crud.custom}
				
				#{crud.custom 'fechaEnviado'}
					${object.loadUltimoEnvio() != null ? object.loadUltimoEnvio().fechaEnviado.format('dd/MM/yyyy') : ''}
				#{/crud.custom}
				
				#{crud.custom 'promo.enviar'}
					<div class="contenedor_funciones">
						#{if object.disponibleParaEnviar()}
							<a href="#" onclick="preguntarEnvioPromo(${object.id});"><img class="funciones" alt="&{'promo.enviar'}" src="/public/images/icons/funciones/email_enviar.png" title="&{'promo.enviar'}"/></a>
						#{/if}
						#{else}
							<img class="funciones" alt="&{'promo.noEnviar'}" src="/public/images/icons/funciones/email_no_enviar.png" title="&{'promo.noEnviar'}"/>
						#{/else}
					</div>
				#{/crud.custom}
				
				#{crud.custom 'estadisticas'}
					<div class="contenedor_funciones">
						<a href="#"><img class="funciones" alt="&{'estadisticas'}" src="/public/images/icons/funciones/grafico_barras.png"
										title="&{'estadisticas'}" onclick="verEstadisticas(${object.id});" /></a>
					</div>
				#{/crud.custom}
				
			#{/crud.table}
		</div>
	#{/if}
	
	<div id="crudListAdd" class="btn">
		<a href="@{Promos.blank()}">
			&{'crear', 'Promoción'}
		</a>
	</div>
	
</div>

<div id="enviar-promocion" style="display: none;">
	<p>¿Está seguro que desea enviar la promoción?</p>
</div>

<div id="estadisticas" style="display: none;">
    <div id="envioPromos" style="width: 545px; height: 350px;"></div>
    <div id="envioPromos_data"></div>
    
    <div style="margin-left: 40px">
		<div class="crudField crud_date">
			<label for="fechaInicio" style="width: 70%">
				&{'plan.fechaInicio'}
			</label>
			<input id="fechaInicio" type="text" size="10" />
		</div>
		
		<div class="crudField crud_date">
			<label for="fechaFin" style="width: 70%">
				&{'plan.fechaFin'}
			</label>
			<input id="fechaFin" type="text" size="10" />
		</div>
    </div>
</div>
